<template>
	<view class="page">
		<!--头部-->
		<view class="my-header">
			<view class="hea-top">
				<view class="top-icon i-icon">
				</view>
			</view>
			
			<view class="hea-main">
				<view class="main-image">
					<!--../../static/images/my/unlogin_head.png-->
					<image :src="infoImage" mode=""></image>
				</view>
				
				<view class="main-friend">
					<view class="friend">
						粉丝-
					</view>
					<view class="friend">
						
					</view>
					<view class="friend">
						关注-
					</view>
				</view>
				
				<view class="main-info" @click=" flng && onlogin()">
					<view class="info-name">
						<text>{{text}}</text>
						<text class="text1">LV.1</text>
					</view>
					<view class="info-text" v-if="loginName">
						还没登录呢，快去登录吧
					</view>
					<view class="info-text">
						ID:211002280
					</view>
				</view>
				
				<view class="main-property">
					<view class="property">
						<view class="property-icon i-icon  p1">
							
						</view>
						<view class="property-text">
							0
						</view>
					</view>
					
					<view class="property">
						<view class="property-icon i-icon p2">
							
						</view>
						<view class="property-text">
							10000
						</view>
					</view>
					
					<view class="property">
						<view class="property-icon i-icon p3">
							
						</view>
						<view class="property-text">
							11
						</view>
					</view>
					
					<view class="property">
						<view class="property-icon i-icon p4">
							
						</view>
						<view class="property-text">
							6
						</view>
					</view>
					
				</view>
				
			</view>
			
		</view>
		
		<!--分类导航-->
		<view class="my-section">
			
			<view class="section">
				<view class="section-name">
					<view class="name-icon i-icon n1">
						
					</view>
					<view class="name">
						我的书单
					</view>
				</view>
				<view class="section-arrow">
					>
				</view>
			</view>
			
			<view class="section">
				<view class="section-name">
					<view class="name-icon i-icon n2">
						
					</view>
					<view class="name">
						我的书架
					</view>
				</view>
				<view class="section-arrow">
					>
				</view>
			</view>
			
			<view class="section">
				<view class="section-name">
					<view class="name-icon i-icon n3">
						
					</view>
					<view class="name">
						充值中心
					</view>
				</view>
				<view class="section-arrow">
					>
				</view>
			</view>
			
			<view class="section">
				<view class="section-name">
					<view class="name-icon i-icon n4">
						
					</view>
					<view class="name">
						意见反馈
					</view>
				</view>
				<view class="section-arrow">
					>
				</view>
			</view>
			
			
			<view class="section">
				<view class="section-name">
					<view class="name-icon i-icon n5">
						
					</view>
					<view class="name">
						联系我们
					</view>
				</view>
				<view class="section-arrow">
					>
				</view>
			</view>
			
			
			<view class="section" @click="onlogin()" v-if="loginName">
				<view class="section-name">
					<view class="name-icon i-icon n6">
						
					</view>
					<view class="name">
						用户登录
					</view>
				</view>
				<view class="section-arrow">
					>
				</view>
			</view>
			
			<view class="section" @click="Outlogin()" v-if="!loginName">
				<view class="section-name">
					<view class="name-icon i-icon n6">
						
					</view>
					<view class="name">
						用户注销
					</view>
				</view>
				<view class="section-arrow">
					>
				</view>
			</view>
			
			
			
			
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				text:"",
				infoImage:"",
				loginName:true,
				flng:false
			}
		},
		onShow() {
			//取除本地缓存数据
			this.getStoryData();
			
		},
		methods: {
			//跳转到登录页面
			onlogin(){
				uni.navigateTo({
					url:"../login/login"
				})
			}
			,
			//取除本地缓存数据
			getStoryData(){
				let userInfo = uni.getStorageSync('userInfo');
				//console.log(userInfo)
				if(userInfo){
					this.text = userInfo.nickName
					this.infoImage = userInfo.avUrl
					this.loginName = false
					this.flng =false
 				}else {
					this.text = "游客"
					this.infoImage = require('../../static/images/my/unlogin_head.png')
					
					this.loginName = true
					
					this.flng =true
				}
			},
			//用户退出
			Outlogin(){
				uni.showModal({
				    title: '',
				    content: '确定要注销吗?',
				    success:  (res) =>{
				        if (res.confirm) {
				           uni.removeStorageSync('userInfo');
						   //取除本地缓存数据
						   this.getStoryData();
						   
						   this.flng =true
						   
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			}
		}
	}
</script>

<style scoped>
	
	.my-header {
		width: 100%;
		height: auto;
		overflow: hidden;
	}
	.my-header .hea-top {
		position: relative;
		width: 100%;
		height: 170upx;
		background: url('../../static/images/my/bg_kanmanhua.png') no-repeat;
		background-size: 100% 100%;
	}
	.i-icon {
			background: url('') ;
	}
	.my-header .hea-top .top-icon {
		position: absolute;
		top: 22upx;
		right: 36upx;
		width: 88upx;
		height: 87upx;
		background-size: 354upx  292upx;
		background-position:  0  0;
		
	}
	
	.hea-main {
		position: relative;
		width: 100%;
		height: auto;
		
		z-index: 2;
		
	}
	.hea-main .main-image {
		position: absolute;
		z-index: 3;
		top: -117upx;
		left: 50%;
		transform: translateX(-50%);
		width: 170upx;
		height: 170upx;
		border-radius: 50%;
		padding: 16upx;
		background-color: #FFFFFF;
		overflow: hidden;
	}
	.hea-main .main-image image {
		display: block;
		width: 100%;
		height: 100%;
		border-radius: 50%;
		overflow: hidden;
	}
	.hea-main .main-friend {
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
		width: 100%;
		height: 55upx;
		
	}
	.hea-main .main-friend .friend {
		flex: 1;
		width: auto;
		height: 100%;
		text-align: center;
		color: #666;
		font-size: 24upx;
		line-height: 80upx;
		
	}
	
	.main-info {
		padding: 26upx 0;
		text-align: center;
	}
	.main-info .info-name {
		width: 100%;
		height: 64upx;
		font-size: 32upx;
		line-height: 64upx;
		text-align: center;
	}
	.main-info .info-name .text1 {
		margin-left: 10upx;
		display: inline-block;
		height: 48upx;
		padding:  0 13upx;
		font-size: 16upx;
		color: #FFFFFF;
		background-color: #ff7647;
		border-radius: 20upx;
		line-height: 48upx;
		text-align: center;
	}
	.main-info .info-text {
		width: 100%;
		height: 48upx;
		font-size: 24upx;
		color: #b6b6b6;
		line-height: 48upx;
		
	}
	.main-property {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: auto;
		
		
	}
	.main-property .property {
		
		display: flex;
		align-items: center;
		justify-content: space-around;
		width: auto;
		height: 106upx;
		overflow: hidden;
		padding: 0 25upx;
		box-sizing: border-box;
		
	}
	.main-property .property  .property-text {
		
		width: auto;
		height: 100%;
		font-size: 32upx;
		overflow: hidden;
		line-height: 94upx;
		text-overflow: ellipsis;
		overflow: hidden;
		text-align: center;	
	}
	.main-property .property .property-icon {
		width: 75upx;
		height: 70upx;
		overflow: hidden;
		
	}
	.main-property .property .property-icon.p1 {
		background-position: -72upx -106upx;
		background-size: 354upx  292upx;
	}
	.main-property .property .property-icon.p2 {
		background-position: -108upx -2upx;
		background-size: 354upx  292upx;
	}
	.main-property .property .property-icon.p3 {
		background-position: -176upx 0upx;
		background-size: 354upx  292upx;
	}
	.main-property .property .property-icon.p4 {
		background-position: -176upx -68upx;
		background-size: 354upx  292upx;
	}
	
	
	/*分类导航*/
	.my-section {
		margin:  0 25upx;
		
	}
	.my-section .section {
		display:  flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 93upx;
		border-bottom: 1upx solid #F5F5F5;
		
		
	}
	.section  .section-arrow {
		font-size: 30upx;
		color: #DDD;
	}
	.my-section .section  .section-name {
		display: flex;
		align-items: center;
		width: auto;
		height: auto;
		
	}
	.section  .section-name  .name-icon {
		margin-right: 15upx;
		width: 64upx;
		height: 64upx;
	
		background-size: 354upx  292upx;
	}
	.section  .section-name  .name-icon.n1 {
			background-position: 0 -170upx;
	}
	.section  .section-name  .name-icon.n2 {
			background-position:-56upx -174upx;
	}
	.section  .section-name  .name-icon.n3 {
			background-position:-126upx -230upx;
	}
	.section  .section-name  .name-icon.n4 {
			background-position:-250upx -54upx;
	}
	.section  .section-name  .name-icon.n5 {
			background-position:-188upx -168upx;
	}
	.section  .section-name  .name-icon.n6 {
			background-position:-246upx 6upx;
	}
	.section  .section-name  .name {
		font-size: 32upx;
		line-height: 100%;
		text-align: center;
		overflow: hidden;
	}
</style>
